<template>
    <el-row class="main">
        <el-col class="padd20 posa">
            <el-col :span="24">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="学校状态">
                        <el-select v-model="formInline.state" placeholder="请选择" class="w150" @change="init()">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="未开通" value="0"></el-option>
                            <el-option label="已开通" value="1"></el-option>
                            <el-option label="服务到期" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-input v-model="formInline.searchText" placeholder="搜索学校名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="init()">查询</el-button>
                    </el-form-item>
                    <el-button class="reset-comfirm-btn fr" @click="clickAdd('')">添加学校</el-button>
                </el-form>
            </el-col>
            <el-col v-loading="loading" class="btn">
                <el-row :gutter="20" class="padd20" style="margin-top: 40px;width: 100%; position: relative;"
                    v-if="page.list.length != 0">
                    <el-col :span="6" class="col-list mb20" v-for="(item, index) in page.list" :key="index">
                        <div class="grid-content bg-purple">
                            <el-col class="tr">
                                <span class="create-tips tr">{{ item.sourceFrom }}</span>
                            </el-col>
                            <el-col class="box box-pack-between">
                                <div class="box box-align-center">
                                    <el-avatar size="large"
                                        :src="item.logo != null ? item.logo : `../../static/image/logo.jpg`"
                                        style="min-width: 40px;"></el-avatar>
                                    <span class="ml10 school-name">{{ item.name }}</span>
                                </div>
                            </el-col>
                            <el-col class="tl mt10 mb10">
                                <span class="service-tips" v-if="item.state == '服务中'">{{ item.state }}</span>
                                <span class="service-tips-valid" v-if="item.state == '未启用'">{{ item.state }}</span>
                            </el-col>
                            <el-col class="box box-pack-between box-align-center btn">
                                <div class="validity-tips tl">
                                    有效期至：{{ item.endTime }}
                                </div>
                                <div style="display: flex;">
                                    <el-button v-if="role == 'team'" class="reset-btn" @click="changeSchool(item)"
                                        style="background: linear-gradient(-13deg, #10905f, #989BFA);">
                                        切换
                                    </el-button>
                                    <el-button v-if="role == 'super' && item.state == '服务中'" class="reset-btn"
                                        @click="modify(item)">服务期+</el-button>
                                </div>
                            </el-col>
                            <el-col style="display: flex; justify-content: left;" v-if="item.state == '服务中'">
                                <div class="adoptswtich" v-if="selectedRole.roleCode == 'team'">
                                    <el-switch v-model="item.autoapprove == 1" active-color="#13ce66"
                                        inactive-color="#ff4949" @click.native="adoptchg(item)"> </el-switch>
                                </div>
                                <div v-if="selectedRole.roleCode == 'team'" class="adopbtn" @click="adoptchg(item)">
                                    <span v-if="item.autoapprove == 1">关闭自动审核</span>
                                    <span v-else style="color:deepskyblue;">开启自动审核</span>
                                </div>
                            </el-col>
                            <el-col class="dl box-align-end box-pack-end" v-if="selectedRole.roleCode == 'super'">
                                <el-button type="text" @click="handleDelete(item)">删除</el-button>
                            </el-col>

                        </div>
                        <!-- 添加操作按钮 -->
                        <div class="delete" @click.stop="" v-if="role == 'team'">
                            <el-dropdown>
                                <el-tag type="info">
                                    <i class="el-icon-more"></i>
                                </el-tag>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="edit"
                                        @click.native="handleEditGl(item)">编辑</el-dropdown-item>
                                    <el-dropdown-item command="delete"
                                        @click.native="handleDeleteGl(item.id)">删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </el-col>
                    <el-col class="mt20">
                        <el-pagination @current-change="teamxxlb" background layout="prev, pager, next" :total="page.total"
                            :page-size="page.pageSize" :current-page="page.pageNum" hide-on-single-page></el-pagination>
                    </el-col>
                </el-row>
                <el-col class="box box-align-center box-pack-center" v-else>
                    <el-empty description="暂无学校"></el-empty>
                </el-col>
                <addDialog :dialogVisible="dialogVisible" @clickClose="clickClose()" :title="title" :info="info"
                    @updateList="init()" ref="child">
                </addDialog>
                <audit :dialogauditVisible="dialogauditVisible" @clickCloses="clickCloses()" :did="did" @init="init()"
                    @datadaopt="datadaopt($event)"></audit>
            </el-col>
        </el-col>
    </el-row>
</template>

<script>
import addDialog from './components/dialog.vue';
import audit from './components/audit.vue'

export default {
    components: {
        addDialog,
        audit
    },
    data() {
        return {
            formInline: {
                state: '',
                searchText: ''
            },
            did: {},
            dialogauditVisible: false,
            objs: {
                adoptswtich: '',
                guia: ''
            },
            searchText: '',
            page: {
                pageNum: 1,
                pageSize: 12,
                list: []
            },
            dialogVisible: false,
            title: "学校信息",
            info: {},
            role: this.$store.state.maxRole,
            selectedRole: this.$store.state.selectedRole,
            schoolid: this.$store.state.loginInfo.user.schoolId,
            loading: false,
            size: ''
        };
    },
    mounted() {
        this.init();
        console.log(this.role, 'rolerolerole')
    },
    methods: {
        onSubmit() {

            console.log('submit!');
        },
        datadaopt(obj) {
            console.log(obj)
            this.objs = obj;
        },
        //删除学校
        handleDelete(item) {
            this.$confirm('此操作将永久删除该学校, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$ajax.post('/yschool/dropSchool', {
                    id: item.id
                }).then(res => {

                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.init();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        adoptchg(item) {
            if (item.autoapprove == 0) { //开启
                this.dialogauditVisible = true;
                this.did = item
            } else { //关闭
                this.$ajax.post('/yschool/closeAuto', {
                    id: item.id
                }).then(res => {
                    this.$message({
                        message: '[' + item.name + ']自动审核功能已关闭',
                        type: 'success'
                    });
                    this.init();
                })
            }
        },
        clickCloses() {
            this.dialogauditVisible = false;
        },
        init() {
            if (this.role == 'super') {
                this.xxlb(1);
            } else if (this.role = 'team') {
                this.teamxxlb(1);
            }
        },
        //查询超级管理员学校列表
        xxlb(pageNum) {
            var params = {
                searchText: this.formInline.searchText,
                pageNum: pageNum,
                pageSize: this.page.pageSize
            };
            this.$ajax.post('/yschool/pagelist', params).then(res => {
                if (res.code == '0') {
                    this.page = res.page;
                    console.log(this.page)
                    this.size = res.size;
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        //查询服务团队学校列表
        teamxxlb(pageNum) {
            var params = {
                searchText: this.formInline.searchText,
                schoolid: this.schoolid,
                pageNum: pageNum,
                pageSize: this.page.pageSize,
                state: this.formInline.state
            };
            console.log(params)
            this.$ajax.post('/yschool/teampagelist', params).then(res => {
                if (res.code == '0') {
                    this.page = res.list;
                    console.log(this.page)
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        modify(item) {
            this.dialogVisible = true
            this.title = "修改学校"
            this.info = item
            this.$refs.child.updateInfo();
        },
        clickClose() {
            this.dialogVisible = false
        },
        //添加学校
        clickAdd() {
            this.dialogVisible = true
            this.title = '添加学校'
            this.$bus.$emit('pageList', this.page.list)
            this.$refs.child.updateInfo();
            // console.log(this.page.list,'//--')
        },
        changeSchool(school) {
            this.loading = true;
            this.$store.commit("setLogo", school.logo);
            this.$store.commit("setSchoolName", school.name);
            this.$store.commit("setSchoolId", school.id);
            location.reload();
            this.$message({
                message: '您已切换至学校【' + school.name + '】',
                type: 'success'
            });

        },
        // 学校管理--编辑按钮
        handleEditGl(item) {
            this.dialogVisible = true
            this.title = "修改学校"
            this.info = item
            this.$refs.child.updateInfo();
        },
        // 学校管理--删除按钮
        handleDeleteGl(id) {
            this.$confirm('此操作将永久删除该学校, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$ajax.post('/yschool/dropSchool', {
                    id: id
                }).then(res => {

                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.init();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
};
</script>

<style scoped lang="scss">
.adopbtn {
    cursor: pointer;
    margin-left: 5px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
}

.adoptswtich {
    margin-left: 5px;
}

@media (max-width: 1400px) {
    .padd20 {
        padding: 0 !important;
    }

    .grid-content {
        padding: 10px 0 !important;
    }
}

@media screen and (min-width: 1540px) {
    .grid-content {
        padding: 10px 20px !important;
    }
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.col-list {
    border-radius: 12px;
    cursor: pointer;

    &:hover {
        .delete {
            display: block;
        }
    }
}


.bg-purple {
    background: #FFFFFF;
    box-shadow: 1px 4px 13px 0px rgba(225, 227, 245, 0.69);
    transition: .3s ease-in-out;
}

.dl {
    display: none;
}

.bg-purple:hover {
    box-shadow: 2px 6px 13px 0px rgba(128, 130, 139, 0.9);

    .dl {
        display: flex;
    }
}

.grid-content {
    padding: 10px;
    border-radius: 4px;
    min-height: 140px;

    .school-name {
        font-size: 16px;
        font-weight: 600;
    }

    .create-tips {
        font-size: 12px;
        color: #888F9E;
    }

    .service-tips {
        font-size: 16px;
        color: #23C083;
        font-weight: 600;
    }

    .service-tips-valid {
        font-size: 16px;
        color: #aab3c0;
        font-weight: 600;
    }

    .validity-tips {
        font-size: 12px;
        color: #5F6572;
    }
}

.main {
    position: relative;
    height: 100%;
}

.posa {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow-y: auto;
    background-color: #fff;

    h3 {
        font-size: 18px;
    }

    .label {
        display: block;
        width: 76px;
        height: 40px;
        line-height: 40px;
        font-weight: 600;
        font-size: 15px;
        margin-right: 10px;
    }

    .btn {
        display: flex;
    }
}

.demo-form-inline {
    float: left;
}

.delete {
    display: none;
    position: absolute;
    margin-top: -150px;
    margin-left: 244px;
    // right: 0;
    // top: 0;
    // right: 20px;
}
</style>
